<template>
<div>
    <!-- 面包屑 -->
    <my-bread level1="权限管理" level2="权限列表"></my-bread>
    <el-card>
        <el-table :data="rightList" height="500" border style="width: 100%;margin-top:20px">
            <el-table-column label="#" width="80" type="index">
            </el-table-column>
            <el-table-column prop="authName" label="权限名称" width="180">
            </el-table-column>
            <el-table-column prop="path" label="路径" width="180">
            </el-table-column>
            <el-table-column label="层级">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level === '0'">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.level === '1'">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.level === '2'">三级</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</div>
</template>

<script>
export default {
    data() {
        return {
            rightList: [],
        }
    },
    created() {
        this.getRightList()
    },
    methods: {
        async getRightList() {
            const res = await this.$http.get(`rights/list`)
            const {
                data,
                meta: {
                    status
                }
            } = res.data
            if (status === 200) {
                this.rightList = data
            }
        }
    }
}
</script>
<style lang="less" scoped>
.el-card{
    margin-top: 20px;
}
</style>
